<template>
    <span class="cpt-label-state no-pddr">{{text}}</span>
</template>
<script>
    import {GET_STATUS,GET_FAR_STATUS,GET_LAZY_STATUS} from '../../serves/data-status'
    import color from 'color'
    export default{
        name:'StatusLevelLabel',
        props:{
            pData:{
                type:Array,
                default:()=>{
                    return []
                }
            },
            pName:{
                type:String,
                request:true
            },
            pKeyText:{
                type:String,
                default:'value'
            },
            pValueText:{
                type:String,
                default:'label'
            },
            pChildText:{
                type:String,
                default:'children'
            },
            pLazy:{
                type:Boolean,
                default:false
            },
            pFar:{
                type:Boolean,
                default:false
            },
            pDef:{
                type:Boolean,
                default:false
            },
        },
        data(){
            return{
                text:'',
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                if(this.pFar){
                    this.initData(GET_FAR_STATUS(this.pName,false));
                }else {
                    if(!this.pLazy){
                        this.initData(GET_STATUS(this.pName,false));

                    }else {
                        GET_LAZY_STATUS(this.pName,false).then((res)=>{
                            this.initData(res);
                        });
                    }
                }
            },
            initData(d){
                let arr = [],_def = [];
                const ec = (level,data)=>{
                    if(this.pData&&this.pData.length>level&&this.pData[level]){
                        data.forEach((x,y)=>{
                            if(x[this.pKeyText] == this.pData[level]){
                                arr.push(x[this.pValueText]);
                                if(x[this.pChildText]&&x[this.pChildText].length>0){
                                    ec(level+1,x[this.pChildText]);
                                }
                            }
                        })
                    }
                };
                ec(0,d);
                this.$set(this,'text',arr.join(' / '))
            }
        },
        watch:{
            pData(newVal,olVal){
                if(newVal!=olVal){
                    this.init()
                }
            }
        },
        components:{

        }
    }
</script>